<!-- 控制系统模块 -->
<template>
  <el-form
    ref="ruleFormRef"
    :model="controlData"
    status-icon
    :rules="rules"
    label-width="120px"
    class="demo-ruleForm"
  >
    <el-form-item label="IP地址:" prop="controlIP">
      <div>
        <span v-if="type">{{ controlData.controlIP }}</span>
        <el-input
          v-else
          v-model="controlData.controlIP"
          clearable
          type="text"
          autocomplete="off"
        />
      </div>
    </el-form-item>
    <el-form-item label="端口:" prop="controlPort">
      <div>
        <span v-if="type">{{ controlData.controlPort }}</span>
        <el-input
          v-else
          v-model="controlData.controlPort"
          clearable
          type="text"
          autocomplete="off"
        />
      </div>
    </el-form-item>
    <el-form
      ref="ruleFormRef2"
      :model="controlUrl"
      status-icon
      label-width="120px"
      class="demo-ruleForm"
    >
      <el-form-item
        label="添加任务URL:"
        prop="newTaskUrl"
        :rules="[
          {
            required: true,
            message: 'url不能为空',
            trigger: 'blur'
          },
          { validator: Url, trigger: 'blur' }
        ]"
      >
        <div>
          <span v-if="type">{{ controlUrl.newTaskUrl }}</span>
          <el-input
            v-else
            v-model="controlUrl.newTaskUrl"
            clearable
            type="text"
            autocomplete="off"
          />
        </div>
      </el-form-item>
      <el-form-item
        label="设备状态URL:"
        prop="deviceStateUrl"
        :rules="[
          {
            required: true,
            message: 'url不能为空',
            trigger: 'blur'
          },
          { validator: Url, trigger: 'blur' }
        ]"
      >
        <div>
          <span v-if="type">{{ controlUrl.deviceStateUrl }}</span>
          <el-input
            v-else
            v-model="controlUrl.deviceStateUrl"
            clearable
            type="text"
            autocomplete="off"
          />
        </div>
      </el-form-item>
      <el-form-item
        label="取消任务URL:"
        prop="cancelTaskUrl"
        :rules="[
          {
            required: true,
            message: 'url不能为空',
            trigger: 'blur'
          },
          { validator: Url, trigger: 'blur' }
        ]"
      >
        <div>
          <span v-if="type">{{ controlUrl.cancelTaskUrl }}</span>
          <el-input
            v-else
            v-model="controlUrl.cancelTaskUrl"
            clearable
            type="text"
            autocomplete="off"
          />
        </div>
      </el-form-item>
      <el-form-item
        label="任务状态URL:"
        prop="taskStateUrl"
        :rules="[
          {
            required: true,
            message: 'url不能为空',
            trigger: 'blur'
          },
          { validator: Url, trigger: 'blur' }
        ]"
      >
        <div>
          <span v-if="type">{{ controlUrl.taskStateUrl }}</span>
          <el-input
            v-else
            v-model="controlUrl.taskStateUrl"
            clearable
            type="text"
            autocomplete="off"
          />
        </div>
      </el-form-item>
      <el-form-item
        label="其他URL:"
        prop="otherUrl"
        :rules="[
          {
            required: true,
            message: 'url不能为空',
            trigger: 'blur'
          },
          { validator: Url, trigger: 'blur' }
        ]"
      >
        <div>
          <span v-if="type">{{ controlUrl.otherUrl }}</span>
          <el-input
            v-else
            v-model="controlUrl.otherUrl"
            clearable
            type="text"
            autocomplete="off"
          />
        </div>
      </el-form-item>
    </el-form>

    <el-form-item>
      <el-button v-if="type" type="primary" @click="clickChange"
        >修改</el-button
      >
      <div v-else>
        <el-button type="primary" :loading="loading" @click="submitClick"
          >确认</el-button
        >
        <el-button type="primary" @click="cancelClick">取消</el-button>
      </div>
    </el-form-item>
  </el-form>
</template>

<script setup>
import { ref, reactive } from 'vue'
import { controlInfo, controlUpdate } from '../../api/control'
import { rulesIP, Url } from '@/utils/rules'
import { ElMessage } from 'element-plus'
const loading = ref(false)
const ruleFormRef = ref(null)
const ruleFormRef2 = ref(null)
const rules = reactive({
  controlIP: [
    { required: true, message: 'IP地址不能为空', trigger: 'blur' },
    { validator: rulesIP, trigger: 'blur' }
  ],
  controlPort: [{ required: true, message: '端口号不能为空', trigger: 'blur' }]
})

const type = ref(true)
const controlData = reactive({})
const controlUrl = reactive({})
const getControlInfo = () => {
  controlInfo().then((res) => {
    Object.assign(controlData, res.data)
    Object.assign(controlUrl, res.data.controlUrl)
  })
}
getControlInfo()
console.log(controlData)
// 修改
const clickChange = () => {
  type.value = false
}
// 取消
const cancelClick = () => {
  type.value = true
  ruleFormRef.value.clearValidate()
  ruleFormRef2.value.clearValidate()
}
const submitClick = () => {
  Object.assign(controlData.controlUrl, controlUrl)
  // console.log(controlData)
  if (!ruleFormRef.value || !ruleFormRef2.value) {
    return false
  } else {
    ruleFormRef2.value.validate((valid) => {
      if (valid) {
        ruleFormRef.value.validate((valid2) => {
          if (valid2) {
            loading.value = true
            setTimeout(() => {
              console.log('submit!')
              type.value = true
              loading.value = false
              controlUpdate(controlData)
                .then((res) => {
                  ElMessage({
                    message: res.message,
                    type: 'success'
                  })
                  // getControlInfo()
                })
                .catch((err) => {
                  ElMessage.error(err.message)
                })
            }, 500)
          } else {
            ElMessage.error('失败')
            return false
          }
        })
      } else {
        ElMessage.error('失败')
        return false
      }
    })
  }
}
</script>

<style scoped lang='scss'>
::v-deep .el-input {
  width: 265px;
}
</style>
